<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息查询</title>
    <!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入 ElementUI 组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 Axios 用于发送 HTTP 请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!-- 查询表单 -->
    <el-card class="query-form">
        <el-form :model="queryForm" label-width="80px">
            <el-form-item label="用户ID">
                <el-input v-model="queryForm.userId" placeholder="请输入用户ID"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="queryForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="queryForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
                <el-button type="success" @click="handleAddUser">新增用户</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <!-- 用户信息表格 -->
    <el-card class="user-table">
        <el-table :data="userList" border style="width: 100%">
            <el-table-column prop="userId" label="用户ID" width="120"></el-table-column>
            <el-table-column prop="username" label="用户名" width="150"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
            <el-table-column prop="createdDt" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="updatedDt" label="更新时间" width="180"></el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEditUser(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDeleteUser(scope.row.userId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
        <el-form :model="currentUser" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="currentUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="currentUser.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="currentUser.email"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitUser">提交</el-button>
        </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 查询表单数据
                queryForm: {
                    userId: '',
                    username: '',
                    email: ''
                },
                // 用户列表数据
                userList: [],
                // 对话框是否可见
                dialogVisible: false,
                // 对话框标题
                dialogTitle: '新增用户',
                // 当前操作用户
                currentUser: {
                    userId: '',
                    username: '',
                    password: '',
                    email: ''
                }
            };
        },
        methods: {
            // 查询用户信息
            handleQuery() {
                const params = {
                    userId: this.queryForm.userId,
                    username: this.queryForm.username,
                    email: this.queryForm.email
                };

                // 发送请求到后端
                axios.post('/user/selectUsers', params)
                    .then(response => {
                        this.userList = response.data; // 更新表格数据
                    })
                    .catch(error => {
                        this.$message.error('查询失败：' + error.message);
                    });
            },
            // 重置查询表单
            resetQuery() {
                this.queryForm = {
                    userId: '',
                    username: '',
                    email: ''
                };
                this.userList = []; // 清空表格数据
            },
            // 打开新增用户对话框
            handleAddUser() {
                this.dialogTitle = '新增用户';
                this.currentUser = { userId: '', username: '', password: '', email: '' };
                this.dialogVisible = true;
            },
            // 打开编辑用户对话框
            handleEditUser(user) {
                this.dialogTitle = '编辑用户';
                this.currentUser = { ...user }; // 复制用户信息
                this.dialogVisible = true;
            },
            // 提交用户信息（新增或编辑）
            submitUser() {
                const url = this.currentUser.userId ? '/user/updateUser' : '/user/insertUser';
                axios.post(url, this.currentUser)
                    .then(response => {
                        this.$message.success('操作成功');
                        this.dialogVisible = false;
                        this.handleQuery(); // 刷新表格数据
                    })
                    .catch(error => {
                        this.$message.error('操作失败：' + error.message);
                    });
            },
            // 删除用户
            handleDeleteUser(userId) {
                debugger;
                console.log(userId);
                this.$confirm('确定删除该用户吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.post('/user/deleteUserById?userId='+userId, { })
                        .then(response => {
                            debugger;
                            this.$message.success('删除成功');
                            this.handleQuery(); // 刷新表格数据
                        })
                        .catch(error => {
                            this.$message.error('删除失败：' + error.message);
                        });
                }).catch(() => {
                    // 用户取消删除
                });
            }
        }
    });
</script>

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
    }
    .query-form {
        margin-bottom: 20px;
    }
    .user-table {
        margin-top: 20px;
    }
</style>
</body>
</html>